<template>
  <div>
    <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="form-style-flex" :model="formState" :label-col="{ style: { width: '80px' } }">
        <a-form-item label="血液成分" class="w-[300px]">
          <SelectItem v-model:value="formState.bldComponentCode" type="DT00295" trigger="focus" all placeholder="请选择" />
        </a-form-item>
        <a-form-item label="血型" class="w-[300px]">
          <SelectItem v-model:value="formState.bldTypeCode" type="DT00006" trigger="focus" placeholder="请选择" />
        </a-form-item>
        <a-form-item label="RH血型" class="w-[300px]">
          <SelectItem v-model:value="formState.bldTypeRhCode" type="DT00007" trigger="focus" placeholder="请选择" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2">
      <div class="flex">
        <a-input v-model:value="formState.localCode" class="mb-2 w-[300px]" type="text" placeholder="请扫描条码" @keydown.enter="getData" />
      </div>
      <BaseTable fill :data-source="tableData" :loading="loading" column-code="000604" :pagination="pagination">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-space>
              <BaseButton confirm-text="是否作废?" type="text" danger size="small" @click="onClickCancel(record)"> 作废 </BaseButton>
            </a-space>
          </template>
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import SearchContainer from '@/components/SearchContainer'
import { post } from '@/utils/request'
import BaseTable from '@/components/BaseTable'
import BaseButton from '@/components/BaseButton'

const formRef = ref(null)
const formState = ref({})

const { loading, tableData, pagination, getData } = useTable({
  url: '/bloodm/bldStoreInRecord/getBldStoreList',
  immediate: true,
  params: formState.value
})

// const onAdd = () => {}

const onClickCancel = async (record) => {
  const { code, msg } = await post('/bloodm/bldStoreInRecord/doScrapBldStore', {
    id: record.id
  })
  if (code !== 0) return message.error(msg || '作废失败')
  message.success(msg)
  getData()
}
</script>
